import React from 'react';
import { Map, Marker } from 'react-amap';

// 假设这是省份经纬度数据
const provinceData = [
  { name: '北京市', position: { longitude: 116.4074, latitude: 39.9042 } },
  { name: '天津市', position: { longitude: 117.1901, latitude: 39.1255 } },
  { name: '河北省', position: { longitude: 114.5025, latitude: 38.0454 } },
  { name: '广东省', position: { longitude: 114.057868, latitude: 22.543099 } },
  // 其他省份数据...
];

// 文字样式配置
const textStyle = {
  fontSize: 12,
  fontWeight: 'bold',
  color: '#333',
  backgroundColor: '#fff',
  border: '1px solid #ccc',
  padding: '2px 5px',
  borderRadius: '3px',
};

const Mylemonui = () => {
  const amapkey = '1fc056efd3f22440d6619d60c463d9a3';
  // 地图中心点坐标改为深圳
  const senzhen = { longitude: 114.057868, latitude: 22.543099 };
  const center = { longitude: 103.82335, latitude: 36.05803 };

  return (
    <div style={{ height: '900px' }}>
      <Map
        amapkey={amapkey}
        center={center}
        zoom={5} // 调整缩放级别以展示全国
      >
        {/* 深圳的标记 */}
        <Marker position={senzhen} />

        {/* 各个省份的标记 */}
        {provinceData.map((province, index) => (
          <Marker
            key={index}
            position={province.position}
            label={
              {
                content: province.name,
                offset: [0, -20], // 文字相对于图标的偏移量
                style: textStyle,
              }
            }
          />
        ))}
      </Map>
    </div>
  );
};

export default Mylemonui;
